<template>
  <el-drawer size="60%" :visible.sync="show"  :close-on-press-escape="false"
    :destroy-on-close="true" title="生产环境调试" :wrapperClosable="false" @closeDrawer="closeDrawer">
    <div class="drawer-box">
      
      <div class="left-params">
         <el-form :model="from" ref="from" label-width="100px" label-position="top" class="demo-dynamic">
        <div class="title">条件选择</div>
        <div class="params-box">
         
            <template v-for="(item,key) in from.params">
              <el-form-item :key="key" :label="item.paramShowname" prop="value"
                :rules="item.required === 1?[{ required: true, message: '请输入', trigger: 'blur' }]:[]">
                <el-input v-if="item.forSelect === ''" v-model="item.value" :placeholder="`请输入${item.paramShowname}`"></el-input>
                <el-select style="width:100%" v-if="item.forSelect !== ''" v-model="item.value" :placeholder="`请选择${item.paramShowname}`">
                  <el-option v-for="(val,keys) in item.forSelect.split(',')" :label="val" :key="keys"></el-option>
                </el-select>
              </el-form-item>
            </template>
          
        </div>
        <div class="btn-box-left">
          <el-button type="primary" size="small" @click="devDebugInfos('from')">运行调试</el-button>
          <el-button type="info" size="small" @click="saveResponse" :disabled="!is_debug_true">保存结果通知</el-button>
        </div>
        </el-form>
      </div>
      <div class="right-params">
        <div class="title">API服务实际URL</div>
        <div class="btn-right-left">
          <el-button type="primary" size="small" icon="el-icon-document-copy" @click="copyType(baseUrl+service.base.serviceUrl)">复制</el-button>
        </div>
        <el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" readonly :value="`${baseUrl}${service.base.serviceUrl}`"></el-input>
        <div class="btn-right-left">
          <el-button type="primary" size="small" icon="el-icon-document-copy" :disabled="!is_debug_true" @click="copyType(debug_info)">复制</el-button>
        </div>
        <el-input type="textarea" :autosize="{ minRows: 9, maxRows: 9}" readonly :value="debug_info"></el-input>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { devDebug } from '@/api/admin/debugInfo';
export default {
  props: {
    show:{
       type:Boolean,
       default:false
    },
    service:{
      type:Object,
      required: true
    },
    baseUrl: {
      type: String,
      default: '',
      required: true
    },
  },
  data() {
    return{
      
      from: {
        params:[],
      },
      debug_info:'',
      is_debug_true: false
    }
  },
  mounted(){
    let temp = []

    for (const key of this.service.params) {
      key.value = '';
      temp.push(key)
    }
    this.from.params = temp
    console.log(this.from)
  },
  methods:{
    // copy
    copyType(val){
      const vm = this
      vm.$copyText(val).then(function(e){
        vm.$message.success('复制成功')
      },function (e){
        vm.$message.error('复制失败，您的浏览器不支持')
      })
    },
    // saveResponse
    saveResponse() {
      this.$emit('saveResponse',this.debug_info)
    },
    // 关闭
    closeDrawer() {
      this.$emit('closeDrawer')
    },
    async devDebugInfos(dynamicValidateForm){
      const vm = this;
      vm.$refs[dynamicValidateForm].validate((vallid)=>{
        if (vallid) {
          let query = {
            dbType: vm.service.base.dbType,
            resultType:vm.service.base.resultType,
            sql: vm.service.sql
          }
          let temps = []
          for (const iterator of vm.service.params) {
            let temp = {}
            temp.paramName = iterator.paramName
            temp.paramType = iterator.paramType
            temp.forSelect = iterator.forSelect
            temps.push(temp)
          }
          query.params = temps
          devDebug(query).then((response) => {
            if (response.code !== '20000') {
              vm.is_debug_true = false
              vm.$alert(`调试失败,请检查您输入的服务配置`,`调试结果`,{
                confirmButtonText: '确定',
                callback: action => {
                  console.log(action)
                }
              })
            } else {
              vm.is_debug_true = true
              vm.debug_info = response.data
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-right-left {
  padding: 10px;
  text-align: right;
  overflow: hidden;
}
.drawer-box {
  width: 100%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  .left-params {
    width: 40%;
    float: left;
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 1px solid #dedede;
    overflow: hidden;
    .params-box {
      padding:0 15px;
      height: 530px;
      overflow-y: scroll;
    }
    .params-box::-webkit-scrollbar {
      width: 2px;
      height: 1px;
    }

    .btn-box-left {
      position: absolute;
      right: 20px;
      bottom: 20px;
      text-align: right;
    }
  }
  .right-params {
    width: 57%;
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    overflow: hidden;
  }
}
.title {
  font-size: 14px;
  color: #666666;
  padding: 10px;
}
</style>